<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" loading-text="正在加载电影列表"
      @load="onLoad">
      <ul :class="store.tabIndex === 0 ? 'nowPlayingList' : 'comingSoon'">
        <ListItem v-for="film in films" :key="film.filmId" :film="film" @click="onClickFilm(film)" />
      </ul>
    </van-list>
  </van-pull-refresh>
</template>
<script setup>
import ListItem from './ListItem.vue';
import { getNowPlayingFilmList, getComingSoonFilmList } from '@/api/index.js'
import { ref, onMounted, watch } from 'vue'
import { useStore } from '@/stores/index.js'
import { useRouter } from 'vue-router'

const router = useRouter()
const store = useStore()
const films = ref([])
const tabIndex = ref(0)
tabIndex.value = store.tabIndex

const refreshing = ref(false)
const loading = ref(false)
const finished = ref(false)


// console.log("当前tab 索引", store.tabIndex);

// 加载数据 正在热映  或者 即将上映
const fetchData = async (cityId, pageNum, pageSize, tabIndex) => {
  loading.value = true
  try {
    let response;
    if (tabIndex === 0) {
      response = await getNowPlayingFilmList(cityId, pageNum, pageSize);
      //console.log("Now Playing Films Response:", response); // 添加调试日志
      if (!Array.isArray(response.data.films)) {
        throw new Error("Expected an array for now playing films");
      }
      store.setPlayingFilms(response.data.films);
      store.setPlayingTotal(response.data.total);

      films.value.push(...store.playingFilms)

      loading.value = false
      if (films.value.length >= store.playingTotal) {
        finished.value = true
      }
    } else if (tabIndex === 1) {
      response = await getComingSoonFilmList(cityId, pageNum, pageSize);
      //console.log("Coming Soon Films Response:", response); // 添加调试日志
      if (!Array.isArray(response.data.films)) {
        throw new Error("Expected an array for coming soon films");
      }
      store.setUpcomingFilms(response.data.films);
      store.setUpcomingTotal(response.data.total);

      films.value.push(...store.upcomingFilms)

      loading.value = false
      if (films.value.length >= store.upcomingTotal) {
        finished.value = true
      }

    }
  } catch (error) {
    console.error("Error fetching data:", error);
    loading.value = false
    finished.value = true //请求失败，表示没有更多数据
  }
};

onMounted(async () => {

  await fetchData(store.cityId, store.pageNum, store.pageSize, store.tabIndex)
  // console.log("当前tab 索引", store.tabIndex);

})


// 下拉刷新 重置数据
const onRefresh = async () => {
  refreshing.value = true
  store.setPageNum(1)
  store.setTabIndex(0)
  await fetchData(store.cityId, store.pageNum, store.pageSize, store.tabIndex)
  refreshing.value = false
}

// 上滑加载更多数据
const onLoad = async () => {
  // 处理加载更多逻辑
  if (finished.value === false) {
    let pageNum = store.pageNum
    store.setPageNum(pageNum + 1); //jump to next page
    await fetchData(store.cityId, store.pageNum, store.pageSize, store.tabIndex)
  }
  // console.log("当前tab 索引", store.tabIndex);
};

// Tab 切换
// watch(() => store.tabIndex, async (newVal) => {
//   //console.log("newVal", newVal)
//   store.setTabIndex(newVal) //设置新的tab 索引
//   store.setPageNum(1) // 重置页码
//   //console.log("重置页码之后：", store.pageNum, store.tabIndex)
//   //await fetchData(store.cityId, store.pageNum, store.pageSize, store.tabIndex)
// });


//电影详情页
const onClickFilm = (film) => {
  console.log("film.id", film.filmId);
  router.push({
    path: `/film/${film.filmId}`,
  })

};

</script>


<style scoped>
.nowPlayingList,
.comingSoon {
  list-style: none;
  padding: 0;
  margin: 0 10px;

}

.van-list__finished-text {
  height: 59px;
  background-color: #ededed;
  color: #bdc0c5;
  font-size: 13px;
  text-align: center;
  margin: auto;
  line-height: 59px;
}
</style>
